<html>
	<head>
		<script type="text/javascript" src="https://www.google.com/jsapi"></script>
		<script type="text/javascript">
			google.load('visualization', '1.0', {'packages':['corechart','table']});
			google.setOnLoadCallback(initCharts);
			
			//Variables
			var pieChart
			var histogram1
			var histogram2
			
			var pieChartData
			var histogram1_view
			var histogram2_view
			
			var histogram1_query = ''
			var pieChart_query = ''
			var histogram2_query = ''
			
			var pieChart_options
			var histogram1_options
			var histogram2_options
			function initCharts(){
			
				//Charts
				pieChart = new google.visualization.PieChart(document.getElementById('pieChart'));
				pieChart_options = {title: 'Where they first met',animation:{ duration: 500, easing: 'out'}};
				
				histogram1 = new google.visualization.Histogram(document.getElementById('histogram1'));
				histogram1_options = {title: 'How long before they introduce to their parents',animation:{ duration: 500, easing: 'out'}};
			
				histogram2 = new google.visualization.Histogram(document.getElementById('histogram2'));
				histogram2_options = {title: 'Number of failed relationships',animation:{ duration: 500, easing: 'out'}};
				
				//Event Listeners
				google.visualization.events.addListener(histogram1, 'select', histogram1Handler);
				google.visualization.events.addListener(pieChart, 'select', pieChartHandler);
				google.visualization.events.addListener(histogram2, 'select', histogram2Handler);
				
				updateQuery();
			}
			
			function updateQuery(){
				var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1n8_aSsZQ4IEZS7kw_VD-3tqkPbCdJBASuvU9SDK8MVY/edit?usp=sharing');
				
				var queryString = 'select * where A is not null';
				queryString += document.getElementById('query_idNumber').value;
				queryString += document.getElementById('query_course').value;
				queryString += document.getElementById('query_department').value;
				queryString += document.getElementById('query_gender').value;
				queryString += document.getElementById('query_genderPreference').value;
				queryString += document.getElementById('query_InRelationship').value;
				
				//Events
				queryString += histogram1_query;
				queryString += pieChart_query;
				queryString += histogram2_query;
				
				query.setQuery(queryString);
				query.send(loadCharts);
				
			}
			
			function loadCharts(response){
				  if (response.isError()) {
					alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
					return;
				  }
				  
				  //Data
				  var data = response.getDataTable();
				  var pieChartQueryColumn;
				  if (pieChart_query == '')
					pieChartQueryColumn = 38;
				  else
					pieChartQueryColumn = 10;
				  pieChartData = google.visualization.data.group(data,[pieChartQueryColumn],[{'column': 0, 'aggregation': google.visualization.data.count, 'type': 'number'}]);
				  if(pieChartData.getFormattedValue(0, 0) == ''){
					pieChartData.removeRow(0);
				  }
				  
				  //Views
				  histogram1_view = new google.visualization.DataView(data);
				  histogram1_view.setColumns([12]);
				  
				  histogram2_view = new google.visualization.DataView(data);
				  histogram2_view.setColumns([32]);
				  
				  //Charts
				  pieChart.draw(pieChartData, pieChart_options);
				  histogram1.draw(histogram1_view, histogram1_options);
				  histogram2.draw(histogram2_view, histogram2_options);
				  
				  //Table
				  //var table_view = new google.visualization.DataView(data);
				  //table_view.setColumns([0, 12, 32]);
				  //var table = new google.visualization.Table(document.getElementById('table_div'));
				  //table.draw(table_view, {showRowNumber: true});
			}
			
			//Event Listeners
			function getCeiling(i,size){
				if (i == 0)
					i = 1;
				while (i % size > 0){
					i++;
				}
				return i
			}
			function histogram1Handler(){
				if (histogram1_query != ''){
					histogram1_query = '';
					updateQuery();
					document.getElementById('histogram1_text').innerHTML = '';
				}
				else{
					var selectionValue = histogram1_view.getFormattedValue(histogram1.getSelection()[0].row,0);
					var ceiling = getCeiling(selectionValue, 5);
					var floor = ceiling - 5;
					histogram1_query = ' and M <= ' + ceiling.toString() +  ' and M >= ' + floor.toString();
					updateQuery();
					document.getElementById('histogram1_text').innerHTML = '<h3>zoomed</h3>';
				}
			}
			function pieChartHandler(){
				if(pieChart_query != ''){
					pieChart_query = '';
					updateQuery();
					document.getElementById('pie_text').innerHTML = '';
				}else{
					var selectionValue = pieChartData.getFormattedValue(pieChart.getSelection()[0].row,0);
					pieChart_query = ' and AM = "' + selectionValue + '"';
					updateQuery();
					document.getElementById('pie_text').innerHTML = '<h3>zoomed</h3>';
				}
			}
			function histogram2Handler(){
				if (histogram2_query != ''){
					histogram2_query = '';
					updateQuery();
					document.getElementById('histogram2_text').innerHTML = '';
				}
				else{
					var selectionValue = histogram2_view.getFormattedValue(histogram2.getSelection()[0].row,0);
					histogram2_query = ' and AG = ' + selectionValue;
					updateQuery();
					document.getElementById('histogram2_text').innerHTML = '<h3>zoomed</h3>';
				}
				
			}
			
			//Export
			function savePieChart(){
				window.open(pieChart.getImageURI());
			}
			function saveHistogram1Chart(){
				window.open(histogram1.getImageURI());
			}
			function saveHistogram2Chart(){
				window.open(histogram2.getImageURI());
			}
		</script>
	</head>
	
	<body>
		
		<table style="width:100%">
		<!-- Filters -->
			<tr>
				<select id = 'query_idNumber' onChange = "updateQuery()">
					<option value = ''>All ID Numbers</option>
					<option value = ' and C = 111'>ID: 111 and below</option>
					<option value = ' and C = 112'>ID: 112</option>
					<option value = ' and C = 113'>ID: 113</option>
					<option value = ' and C = 114'>ID: 114</option>
				</select>
				
				<select id = 'query_course' onChange="updateQuery()">
					<option value = ''>All Courses</option>
					<option value = ' and D = "BS CS - CSE"'>Course: BS CS - CSE</option>
					<option value = ' and D = "BS CS - IST"'>Course: BS CS - IST</option>
					<option value = ' and D = "BS CS - NE"'>Course: BS CS - NE</option>
					<option value = ' and D = "BS CS - ST"'>Course: BS CS - ST</option>
					<option value = ' and D = "BS INSYS"'>Course: BS INSYS</option>
					<option value = ' and D = "BS IT"'>Course: BS IT</option>
				</select>
				
				<select id = 'query_department' onChange="updateQuery()">
					<option value = ''>All Departments</option>
					<option value = ' and E = "ST Department"'>Department: ST Department</option>
					<option value = ' and E = "IT Department"'>Department: IT Department</option>
					<option value = ' and E = "CT Department"'>Department: CT Department</option>
				</select>
				
				<select id = 'query_gender' onChange="updateQuery()">
					<option value = ''>All Genders</option>
					<option value = ' and G = "Male"'>Gender: Male</option>
					<option value = ' and G = "Female"'>Gender: Female</option>
				</select>
				
				<select id = 'query_genderPreference' onChange="updateQuery()">
					<option value = ''>Gender Preference</option>
					<option value = ' and F = "Male"'>Prefers Male</option>
					<option value = ' and F = "Female"'>Prefers Female</option>
					<option value = ' and F = "Male, Female"'>Prefers Male and Female</option>
				</select>
				
				<select id = 'query_InRelationship' onChange="updateQuery()">
					<option value = ''>Relationship Status</option>
					<option value = ' and H = "No"'>In a Relationship</option>
					<option value = ' and H = "Yes"'>Not in a Relationship</option>
				</select>
			</tr>
		<!-- Charts -->
		  <tr>
			<td align = "center"><button onclick="savePieChart()">Export Chart</button><div id ="pie_text"></div><div id="pieChart" style="width: 500px; height: 800px;"></div></td>
			<td align = "center"><button onclick="saveHistogram1Chart()">Export Chart</button><div id ="histogram1_text"></div><div id="histogram1" style="width: 500px; height: 800px;"></div></td>		
			<td align = "center"><button onclick="saveHistogram2Chart()">Export Chart</button><div id ="histogram2_text"></div><div id="histogram2" style="width: 500px; height: 800px;"></div></td>
		  </tr>
		</table>
		<!-- Table -->
		<!-- <div id="table_div"></div> -->
	</body>
</html>